<template>
  <div class="implementation-knowledge-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>实施知识库</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增文档
          </el-button>
        </div>
      </template>

      <!-- 知识分类 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="category-card">
            <el-menu default-active="1">
              <el-menu-item index="1">
                <el-icon><Document /></el-icon>
                <span>实施方法论</span>
              </el-menu-item>
              <el-menu-item index="2">
                <el-icon><Setting /></el-icon>
                <span>系统配置指南</span>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon><DataAnalysis /></el-icon>
                <span>数据迁移方案</span>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon><School /></el-icon>
                <span>培训教材</span>
              </el-menu-item>
              <el-menu-item index="5">
                <el-icon><QuestionFilled /></el-icon>
                <span>常见问题FAQ</span>
              </el-menu-item>
              <el-menu-item index="6">
                <el-icon><Files /></el-icon>
                <span>最佳实践</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <el-col :span="18">
          <div class="knowledge-list">
            <el-card 
              v-for="doc in documents" 
              :key="doc.id"
              shadow="hover"
              class="knowledge-card"
              @click="handleView(doc)"
            >
              <div class="doc-header">
                <div>
                  <h4>{{ doc.title }}</h4>
                  <el-text size="small" type="info">{{ doc.author }} · {{ doc.createTime }}</el-text>
                </div>
                <el-tag>{{ doc.category }}</el-tag>
              </div>
              <p class="doc-summary">{{ doc.summary }}</p>
              <div class="doc-footer">
                <div>
                  <el-icon><View /></el-icon> {{ doc.views }}
                  <el-icon style="margin-left: 15px"><Download /></el-icon> {{ doc.downloads }}
                </div>
                <el-rate v-model="doc.rating" disabled show-score />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Document, Setting, DataAnalysis, School, QuestionFilled, Files, View, Download } from '@element-plus/icons-vue'

const documents = ref([
  {
    id: 1,
    title: 'ERP实施标准流程指南',
    category: '实施方法论',
    author: '张伟',
    summary: '详细介绍ERP系统实施的标准流程、关键节点和注意事项...',
    views: 256,
    downloads: 89,
    rating: 5,
    createTime: '2024-01-15'
  },
  {
    id: 2,
    title: '财务模块配置手册',
    category: '系统配置指南',
    author: '李娜',
    summary: '财务模块的详细配置说明，包括科目设置、凭证模板等...',
    views: 189,
    downloads: 67,
    rating: 4.5,
    createTime: '2024-02-20'
  },
  {
    id: 3,
    title: '数据迁移最佳实践',
    category: '数据迁移方案',
    author: '王强',
    summary: '总结多个项目的数据迁移经验，提供可复用的迁移方案...',
    views: 324,
    downloads: 112,
    rating: 4.8,
    createTime: '2024-03-10'
  }
])

const handleAdd = () => {
  ElMessage.info('新增文档')
}

const handleView = (doc) => {
  ElMessage.info('查看文档：' + doc.title)
}
</script>

<style scoped>
.implementation-knowledge-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-card {
  min-height: 600px;
}

.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.knowledge-card {
  cursor: pointer;
  transition: all 0.3s;
}

.knowledge-card:hover {
  transform: translateY(-2px);
}

.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.doc-summary {
  color: #606266;
  margin: 10px 0;
}

.doc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}
</style>

